<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
</head>
<style>
    #roleAuthTable + .layui-table-view .layui-table tbody tr:hover {
        background-color: transparent;
    }
    tbody tr .layui-table-cell {
        height: auto !important;
    }
    tbody tr td:last-child .layui-table-cell{
        white-space: normal !important; /* 允许多行显示 */
        word-break: break-all;          /* 长单词或 URL 地址换行 */
    }
    .layui-input-block {
        margin-left: 85px;
        min-height: 36px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane">
                <form lay-filter="searchStationForm" id="searchStationForm" class="layui-form model-form">
                    <div class="layui-form-item">
                        <!--<div class="layui-inline">-->
                            <!--<label class="layui-form-label w-auto">保险公司</label>-->
                            <!--<div class="layui-input-inline">-->
                                <!--<input name="bus_from_company_name" id="bus_from_company_name" class="layui-input" type="text" placeholder="" autocomplete="off"/>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">询价单号</label>
                            <div class="layui-input-inline">
                                <input name="bus_inquiry_no" id="bus_inquiry_no" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">下单时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="due_date" placeholder="时间段" class="layui-input" id='due_date'>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">修理厂</label>
                            <div class="layui-input-inline">
                                <input name="repair_company" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">修理电话</label>
                            <div class="layui-input-inline">
                                <input name="repair_company_phone" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                            </div>
                        </div>

                    </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label w-auto">车牌号</label>
                                <div class="layui-input-inline">
                                    <input name="vehicle_license_num" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label w-auto">车架号</label>
                                <div class="layui-input-inline">
                                    <input name="vehicle_frame_no" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label w-auto">车辆品牌</label>
                                <div class="layui-input-inline">
                                    <input name="brand_name" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                                </div>
                            </div>
                            <!--<div class="layui-inline">-->
                                <!--<label class="layui-form-label w-auto">车系</label>-->
                                <!--<div class="layui-input-inline">-->
                                    <!--<input name="car_series" id="car_series" class="layui-input" type="text" placeholder="" autocomplete="off"/>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="layui-inline">
                                <label class="layui-form-label w-auto">车型</label>
                                <div class="layui-input-inline">
                                    <input name="car_model" id="car_model" class="layui-input" type="text" placeholder="" autocomplete="off"/>
                                </div>
                            </div>



                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                            </button>
                            <button id="btnReset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe669;</i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <table class="layui-table" id="infoTable" lay-filter="infoTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="infoTableBar">
    <!--<a class="layui-btn-a" lay-event="detail">详情</a>-->
    <!--{{# if(d.returned_money_state<2){ }}-->
    <!--<a class="layui-btn-a" style="background-color: #ff9900" lay-event="payMoney">收款</a>-->
    <!--{{#} }}-->
    <!--{{# if(d.send_goods_state<2){ }}-->
    <!--<a class="layui-btn-a" style="background-color: #0bc5fd" lay-event="sendGoods">发货</a>-->
    <!--{{#} }}-->
    <!--{{# if(d.invoice_state<2){ }}-->
    <!--<a class="layui-btn-a" style="background-color: #198ce8" lay-event="invoice">开票</a>-->
    <!--{{#} }}-->
</script>
<!-- 付款表单弹窗 -->
<script type="text/html" id="payMoneyForm">
    <form lay-filter="payMoneyForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="type" value="2" type="hidden"/>
        <input name="company_type" value="2" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">收款金额</label>
            <div class="layui-input-block">
                <input name="account" placeholder="请输入收款金额" type="number" class="layui-input" autocomplete="off" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收款时间</label>
            <div class="layui-input-block">
                <input type="text" name="pay_datetime" id="pay_datetime" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收款方式</label>
            <div class="layui-input-block">
                <select name="pay_type" id="pay_type" lay-search lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收款凭证</label>
            <div class="layui-input-inline upload_icon" id="pic" style="width:50px;display: none">
                <img src="" id="img" class="imgs" style="width:100%; height: 100%;">
            </div>
            <p class="layui-btn" id='uploadfile'>
                <i class="layui-icon">&#xe67c;</i>
                <span>上传</span>
            </p>
            <input name="pic_url" id="pic_url" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input name="log_common" placeholder="备注" type="text" class="layui-input"
                       maxlength="155" />
            </div>
        </div>
        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="payMoneyFormSubmit" lay-submit>确定</button>
        </div>
    </form>
</script>
<script type="text/html" id="sendGoodsForm">
    <form lay-filter="sendGoodsForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="company_type" value="2" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">发货状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="send_goods_state" lay-filter="choseType" value="2" title="发全部" checked>
                <input type="radio" name="send_goods_state" lay-filter="choseType" value="1" title="发部分">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发货时间</label>
            <div class="layui-input-block">
                <input type="text" name="send_datetime" id="send_datetime" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">发货单号</label>
            <div class="layui-input-block">
                <input name="send_goods_no" placeholder="发货单号" type="text" class="layui-input" autocomplete="off" lay-verify="required" required/>
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">上传凭证</label>
            <div class="layui-input-inline upload_icon" id="pic" style="width:50px;display: none">
                <img src="" id="img" class="imgs" style="width:100%; height: 100%;">
            </div>
            <p class="layui-btn" id='uploadfile'>
                <i class="layui-icon">&#xe67c;</i>
                <span>上传</span>
            </p>
            <input name="pic_url" id="pic_url" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input name="log_common" placeholder="备注" type="text" class="layui-input" autocomplete="off"
                       maxlength="155" />
            </div>
        </div>
        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="sendGoodsFormSubmit" lay-submit>确定</button>
        </div>
    </form>
</script>
<script type="text/html" id="invoiceForm">
    <form lay-filter="invoiceForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="company_type" value="2" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">开票时间</label>
            <div class="layui-input-block">
                <input type="text" name="invoice_datetime" id="invoice_datetime" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开票凭证</label>
            <div class="layui-input-inline upload_icon" id="pic" style="width:50px;display: none">
                <img src="" id="img" class="imgs" style="width:100%; height: 100%;">
            </div>
            <p class="layui-btn" id='uploadfile'>
                <i class="layui-icon">&#xe67c;</i>
                <span>上传</span>
            </p>
            <input name="pic_url" id="pic_url" hidden/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input name="log_common" placeholder="备注" type="text" class="layui-input" autocomplete="off"
                       maxlength="155"/>
            </div>
        </div>
        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="invoiceFormSubmit" lay-submit>确定</button>
        </div>
    </form>
</script>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table','admin', 'laydate','upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;

        var userObj =  JSON.parse(getSessionStorage('gysuname'));
        var pay_type;
        laydate.render({
            elem: '#due_date'
            ,range: true
            ,trigger: 'click'
        });

        form.render();
        //渲染表格
        table.render({
            elem: '#infoTable',
            url: access_baseurl+'Sales/getList',
            where: {
                opt_user_id:userObj.id
            },
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号'},
                {field: 'bus_inquiry_no', title: '询价单号',width: 230,templet: function (d) {
                        return "<a lay-event='detail' style='border-bottom: 1px solid blue;color: blue;'>"+d.bus_inquiry_no+"</a>";
                    }},
                {field: 'sure_datetime', title: '订单时间',width: 220},
                {field: 'vehicle_license_num', title: '车牌号',width: 110},
                {field: 'brand_name', title: '车辆品牌'},
                {field: 'car_model', title: '车型'},
                {field: 'repair_company_name', title: '修理厂名称'},
                {field: 'send_goods_state', title: '是否发货',width: 100,templet:function (d) {
                        if(d.send_goods_state === 1){
                            return '部分已发';
                        }else if(d.send_goods_state === 2){
                            return '全部已发';
                        }else{
                            return '未发';
                        }
                    }},
                {field: 'totall_price_tax', title: '采购金额',templet:function (d) {
                        var proccess = parseFloat(d.returned_money)/parseFloat(d.totall_price_tax)*100
                        // if(d.totall_price_tax > 0){
                        //     return d.totall_price_tax+'元<br>'+'收款进度：'+proccess.toFixed(2)+'%';
                        // }else {
                            return d.totall_price_tax+'元'
                        // }
                    }},
                {field: 'invoice_state', title: '是否开票',width: 120,
                    templet:function (d) {
                        if(d.invoice_state === 2){
                            return '已开';
                        }else{
                            return '未开';
                        }
                    }
                },
                {field: 'returned_money_state', title: '是否收款',width: 120,
                    templet:function (d) {
                        if(d.returned_money_state === 1){
                            return '部分已收';
                        }else if(d.returned_money_state === 2){
                            return '全部已收';
                        }else{
                            return '未收';
                        }
                    }
                },
                // {align: 'left', toolbar: '#infoTableBar', title: '操作'}
            ]]
        });

        // 工具条点击事件
        table.on('tool(infoTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') { //修改
                window.parent.go_to_page_general('./html/sales/detail.html','id='+data.id);
            }else if(obj.event === 'payMoney'){
                showPayMoneyModel(data);
            }else if(obj.event === 'sendGoods'){
                showSendGoodsModel(data);
            }else if(obj.event === 'invoice'){
                showInvoiceModel(data);
            }
        });

        function showPayMoneyModel(form_data){
            admin.open({
                type: 1,
                area: '500px',
                offset: ['65px','450px'],
                title: '付款',
                content: $('#payMoneyForm').html(),
                success: function (layero, index) {
                    // console.log(layero)
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.val('payMoneyForm',form_data);
                    uploadImg('paypic','#uploadfile',function (data) {
                        $('#pic_url').val(data.file);
                        $('#pic').show();
                        $('#img').attr('src',data.file)
                    })
                    laydate.render({
                        elem: '#pay_datetime'
                        ,trigger: 'click',
                        type: 'datetime', // 设置类型为 datetime
                        format: 'yyyy-MM-dd HH:mm:ss', // 设置显示格式
                        value: new Date()
                    });
                    var payStr = getPayType();
                    $('#pay_type').html(payStr);

                    form.render();
                }
            })
        }

        form.on('submit(payMoneyFormSubmit)', function (d) {
            layer.load(2);
            send_req('Sales/payMoeny', d.field, function (res) {
                layer.closeAll('page');
                layer.closeAll('loading');
                layer.msg('操作成功', {icon: 1});
                var where = getWhere();
                table.reload('infoTable', {where: where});
            },false);
            return false;
        });

        function showSendGoodsModel(form_data){
            admin.open({
                type: 1,
                area: '500px',
                offset: ['65px','450px'],
                title: '发货',
                content: $('#sendGoodsForm').html(),
                success: function (layero, index) {
                    // console.log(layero)
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.val('sendGoodsForm',form_data);
                    uploadImg('paypic','#uploadfile',function (data) {
                        $('#pic_url').val(data.file);
                        $('#pic').show();
                        $('#img').attr('src',data.file)
                    })
                    laydate.render({
                        elem: '#send_datetime'
                        ,trigger: 'click',
                        type: 'datetime', // 设置类型为 datetime
                        format: 'yyyy-MM-dd HH:mm:ss', // 设置显示格式
                        value: new Date()
                    });
                    form.render();
                }
            })
        }

        form.on('submit(sendGoodsFormSubmit)', function (d) {
            layer.load(2);
            send_req('Sales/sendGoods', d.field, function (res) {
                layer.closeAll('page');
                layer.closeAll('loading');
                layer.msg('操作成功', {icon: 1});
                var where = getWhere();
                table.reload('infoTable', {where: where});
            },false);
            return false;
        });

        function showInvoiceModel(form_data){
            admin.open({
                type: 1,
                area: '500px',
                offset: ['65px','450px'],
                title: '开票',
                content: $('#invoiceForm').html(),
                success: function (layero, index) {
                    // console.log(layero)
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.val('invoiceForm',form_data);
                    uploadImg('paypic','#uploadfile',function (data) {
                        $('#pic_url').val(data.file);
                        $('#pic').show();
                        $('#img').attr('src',data.file)
                    })
                    laydate.render({
                        elem: '#invoice_datetime'
                        ,trigger: 'click',
                        type: 'datetime', // 设置类型为 datetime
                        format: 'yyyy-MM-dd HH:mm:ss', // 设置显示格式
                        value: new Date()
                    });
                    form.render();
                }
            })
        }

        form.on('submit(invoiceFormSubmit)', function (d) {
            layer.load(2);
            send_req('Sales/invoice', d.field, function (res) {
                layer.closeAll('page');
                layer.closeAll('loading');
                layer.msg('操作成功', {icon: 1});
                var where = getWhere();
                table.reload('infoTable', {where: where});
            },false);
            return false;
        });

        function uploadImg(dicName='pic',elem='#uploadfile',succfun){
            upload.render({
                elem: elem //绑定元素
                ,url: access_baseurl + 'File/uploadImg' //上传接口
                ,data:{
                    'dicName':dicName,
                }
                ,accept:'images'
                ,acceptMime:'image/*'
                ,done: function(res){
                    //上传完毕回调
                    if(res.success === true){
                        succfun(res.obj);
                    }else {
                        layer.closeAll('loading');
                        layer.msg(res.msg, { icon: 2, anim: 6 });
                        $('.site-demo-active').removeClass('layui-btn-disabled');
                        $('.site-demo-active').removeAttr('disabled');
                    }
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        }

        function getPayType(){
            send_req('Dictionary/getListByType', {type:1}, function (data) {
                pay_type = data.pay_type;
            },false);
            var payStr = '<option value="">全部</option>';
            for(var i=0;i<pay_type.length;i++){
                payStr+='<option value="'+pay_type[i].name+'">'+pay_type[i].name+'</option>';
            }
            return payStr;
        }

        $(document).off('click','.imgs').on("click", ".imgs", function(event){
            var imgSrc = $(this).attr("src");
            window.parent.open_pic_url(imgSrc);
            return false;
        });

        $('#btnSearch').click(function () {
            var where = getWhere();
            table.reload('infoTable', {where: where});
            return false;

        });
        $('#btnReset').click(function () {
            var t = $('#searchStationForm [name]').serializeArray();
            var data;
            $.each(t, function() {
                data[this.name] = '';
            });
            form.val('searchStationForm',data);
            form.render();
            table.reload('infoTable', {where: data});
            return false;
        });

        function getWhere() {
            var t = $('#searchStationForm [name]').serializeArray();
            var where = {};
            $.each(t, function() {
                where[this.name] = this.value;
            });
            return where;
        }
    });
</script>
</body>
</html>